<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>elementUI 的表格标签 </title>

    <!--引入Vue组件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
<!--
        el-table  标签
           data  展示的数据  (这里的数据是Vue中的data中的数据(Array))
           style 样式

        <el-table-column>  列
              label  列名
              prop   数据中的 key
              width  宽度

         elementUI 的操作步骤:
         1、引入 css、js
         2、初始化Vue
         3、去复制组件过来
         4、Vue data中的数据准备好
         5、修改elementUI的组件、填充数据
-->
<div id="app">

    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                label="日期"
                prop="date"
                width="180">
        </el-table-column>
        <el-table-column
                label="姓名"
                prop="name"
                width="180">
        </el-table-column>

        <el-table-column
                label="地址"
                prop="address"
                width="180">
        </el-table-column>
    </el-table>

</div>

<script>

    new Vue({
        el:"#app",
        data:{
            tableData: [{
                date: '2016-05-02',
                name: '胡克飞',
                address: '广州市天河区凤凰街道'
            }, {
                date: '2016-05-04',
                name: '李震东',
                address: '广州市天河区凤凰街道'
            }, {
                date: '2016-05-01',
                name: '李江红',
                address: '广州市天河区凤凰街道'
            }, {
                date: '2016-05-03',
                name: '黄权峰',
                address: '广州市天河区凤凰街道'
            }]
        },
        methods:{

        }
    })

</script>

</body>
</html>